<script setup>
import {useRouter, useRoute} from 'vue-router'
import {ref, defineEmits} from "vue"
const emit = defineEmits(['search'])

const router = useRouter()
const route = useRoute()

const searchKey = ref(route.params.searchKey)
const inputDeleteClick = () => {
 router.push('/search')
}
const handleEnter = () => {
  emit('search', searchKey.value)
  router.push(`/search/${searchKey.value}`)
}

</script>

<template>
  <div class="input_box">
    <img src="@/assets/images/icons/search_icon.png" alt="">
    <input class="input" v-model="searchKey" @keyup.enter="handleEnter" />
    <img @click="inputDeleteClick" src="@/assets/images/icons/x.jpg" alt="">
  </div>
</template>

<style scoped lang="scss">
.input_box {
  display: flex;
  align-items: center;
  height: 3.5rem;
  margin: 1.5rem;
  padding: 0 1rem;
  border-radius: 3rem;
  border: 1px solid var(--van-primary-color);
  background: #FFFFFC;

  .input {
    flex: 1;
    padding: 0 .5rem;
    border: none;
    outline: none;
    box-sizing: border-box;
    background-color: transparent;
    color: #333;
  }

}
</style>